<template>
  <!-- 商品简介 -->
  <div class="goods_info">
    <!-- 商品价格名字销量 -->
    <div class="info_intro">
      <div class="intro_price">
        <p class="intro_reality_price">￥{{obj.goods_reality_price}}</p>
        <p class="intro_original_price">￥{{obj.goods_original_price}}</p>
      </div>
      <div class="intro_name">{{obj.goods_name}}——{{obj.type}}</div>
      <div class="intro_sale">已售卖{{obj.sold_num}}件</div>
    </div>
    <!-- 商品规格 -->
    <div class="info_specs">
      <div class="specs_choose" @click="changeshow()">
        <p class="specs_desc">选择</p>
        <p class="specs_item">默认×1</p>
        <van-icon name="arrow" />
      </div>
      <div class="specs_fare">
        <p class="specs_desc">运费</p>
        <p class="specs_item">免运费</p>
      </div>
      
    </div>
    <div class="info_logo">
      <p>瑞幸潮品自营</p>
      <span>·</span>
      <p>好物品质保证</p>
      <span>·</span>
      <p>购物畅选无忧</p>
    </div>
    <!-- 商品详情 -->
    <div class="info_detail">
      <h4>商品详情</h4>
      <div class="detail_img">
        <img v-for="(v,i) in obj.images" :key="i" :src="v.img_path" alt="">
      </div>
    </div>
    <!-- 底部购买 -->
    <div class="detail_shop">
      <van-goods-action>
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-button color="#bfc8df"  type="warning" text="加入购物车" @click="changeshow()"/>
        <van-goods-action-button color="#6d86c4" type="danger" text="立即购买" @click="changeshow()"/>
      </van-goods-action>
    </div>
    <!-- 弹出框 -->
    <van-action-sheet v-model="show">
      <van-icon name="cross" @click="changeshow()"/>
      <div class="content">
        <div class="pop_top">
          <div class="top_img_box">
            <img src="/tide/fashion_detail/1.png">
          </div>
          <div class="top_info">
            <div class="top_info_price">
              <p class="top_reality_price">￥{{obj.goods_reality_price}}</p>
              <p class="top_original_price">￥{{obj.goods_original_price}}</p>
            </div>
            <div class="top_info_specs">
              <p class="top_specs_desc"> 已选：</p>
              <p class="top_specs_item">默认</p>
            </div>
          </div>
        </div>

        <van-goods-action>
          <van-goods-action-button color="#bfc8df"  type="warning" text="加入购物车"/>
          <van-goods-action-button color="#6d86c4" type="danger" text="立即购买" @click="toshop()"/>
        </van-goods-action>

      
      </div>
      
    </van-action-sheet>
  </div>
</template>

<script>
export default {
  props:["obj"],
  data(){
    return{
      show:false
    }
  },
  methods:{
    changeshow(){
      this.show = !this.show;
    },
    toshop(){
      this.$router.push("/shop")
    }
  }
}
</script>

<style scoped>
  .goods_info{
    width: 95%;
    margin: auto;
  }
  .goods_info .info_intro,
  .goods_info .info_specs,
  .goods_info .info_logo,
  .goods_info .info_detail{
    /* height: 1.04rem; */
    background-color: #ffffff;
    padding: 0.1rem;
    box-sizing: border-box;
    border-radius: 0.04rem;
    margin-bottom: 0.1rem;
  }
  .goods_info .info_intro .intro_price,
  .top_info_price{
    display: flex;
    justify-content: flex-start;
    height: 0.35rem;
    /* background-color: aquamarine; */
    line-height: 0.35rem;
  }
  .goods_info .info_intro .intro_price .intro_reality_price,
  .top_reality_price{
    font-size: 0.18rem;
    color: #d94a00;
    margin-right: 0.05rem;
    font-weight: bold;
  }
  .goods_info .info_intro .intro_price .intro_original_price,
  .top_original_price{
    font-size: 0.1rem;
    color: #8d8d8d;
    text-decoration: line-through;
  }
  .goods_info .info_intro .intro_name{
    line-height: 0.28rem;
    height: 0.28rem;
    font-size: 0.16rem;
    color: #383938;
    /* background-color: cadetblue; */
  }
  .goods_info .info_intro .intro_sale{
    line-height: 0.18rem;
    height: 0.18rem;
    font-size: 0.12rem;
    color: #a3a3a3;
    /* background-color: cadetblue; */
  }
  .goods_info .info_specs{
    padding: 0 0.1rem;
  }
  .goods_info .info_specs>div{
    height: 0.35rem;
    line-height: 0.35rem;
    display: flex;
  }
  .goods_info .info_specs>div .specs_desc{
    color: #a6a6a6;
    font-size: 0.12rem;
    margin-right: 0.1rem;
  }
  .goods_info .info_specs>div .specs_item{
    color: #434343;
    font-size: 0.12rem;
    /* margin-right: 0.1rem; */
  }
  .goods_info .info_specs .specs_choose{
    border-bottom: 1px solid #fafafa;
    position: relative;
  }
  .goods_info .info_specs .specs_choose .van-icon{
    position: absolute;
    right: 0.1rem;
    height: 0.35rem;
    line-height: 0.35rem;
  }
  .goods_info .info_logo{
    display: flex;
    justify-content: center;
    color: #506fba;
    font-size: 0.12rem;
    font-weight: bold;
  }
  .goods_info .info_logo span{
    margin: 0 0.1rem;
  }
  .goods_info .info_detail{
    padding: 0 0.1rem;
  }
  .goods_info .info_detail h4{
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: 0.14rem;
    font-weight: normal;
    color: #2b2c2b;
  }
  .goods_info .info_detail .detail_img img{
    width: 100%;
    display: block;
  }
  .top_info_price{
    display: flex;
    justify-content: flex-start;
    height: 0.43rem;
    /* background-color: aquamarine; */
    line-height: 0.43rem;
  }
  .top_info_specs{
    display: flex;
    justify-content: flex-start;
    height: 0.3rem;
    line-height: 0.25rem;
    margin-left: 0.05rem;
  }
  .top_info_specs>p{
    font-size: 0.12rem;
    color: #616261;
  }
  .content{
    padding: 0.33rem 0.2rem 1.35rem;
  }
  .content .pop_top{
    height: 0.73rem;
    display: flex;

  }
  .content .pop_top .top_img_box{
    width: 0.95rem;
    height: 100%;
    margin-right: 0.12rem;
  }
  .content .pop_top .top_img_box img{
    width: 100%;
  }
  .content .van-goods-action{
    bottom: 0.1rem;
  }
  .van-icon-cross{
    position: absolute;
    right: 0.18rem;
    top: 0.18rem;
    width: 0.2rem;
    height: 0.2rem;
    color: #fff;
    text-align: center;
    line-height: 0.2rem;
    border-radius: 50%;
    background-color: #cccccc;
  }
</style>